---
# title: "Screen Readers"
# description: "Utilities for improving accessibility with screen readers."
title: "屏幕阅读器"
description: "用于改善屏幕阅读器的可访问性的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/accessibility'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage -->
## 使用

<!-- Use `sr-only` to hide an element visually without hiding it from screen readers: -->
使用 `sr-only` 来隐藏一个元素，而不对屏幕阅读器隐藏。

```html
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>
```

<!-- Use `not-sr-only` to undo `sr-only`, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example: -->
使用 `not-sr-only` 来撤销 `sr-only`，使一个元素对视力用户和屏幕阅读器都可见。当您想在小屏幕上隐藏某些元素，但在大屏幕上显示它时，这很有用。

```html
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>
```

<!-- By default, `responsive` and `focus` variants are generated for these utilities. You can use `focus:not-sr-only` to make an element visually hidden by default but visible when the user tabs to it — useful for "skip to content" links: -->
默认情况下，`responsive` 和 `focus` 变体是为这些功能类生成的。您可以使用 `focus:not-sr-only` 来使一个元素在默认情况下被隐藏，但当用户用 tab 键点击它时，它又是可见的--这对 `skip to content` 链接很有用。

```html
<a href="#" class="sr-only focus:not-sr-only">
  Skip to content
</a>
```

<!-- ## Customizing -->
## 自定义

<!-- ### Variants -->
### 变体

<Variants plugin="accessibility" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="accessibility" />
